<template>
  <div class="wholeView">
    <div class="breadcrumb">
      <div class="breadItem"
           v-for="(item,index) in breadList"
           :key="index">
        <div @click="handle_back(item,index)">{{item.areaName}}</div>
        <p v-if="index != breadList.length - 1"> > </p>
      </div>
    </div>
    <el-table :data="tableData"
              v-loading="tableLoading"
              :header-cell-style="{
          background: '#0070C0',
          color: '#ffffff',
        }"
              style="width: 100%">
      <el-table-column prop="displayName"
                       align="center"
                       label="区域">
        <template slot-scope="scope">
          <span class="area"
                @click="handleArea(scope.row)">{{scope.row.displayName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="整体收入"
                       align="center">
        <el-table-column prop="monthIncome"
                         align="center"
                         label="当月"></el-table-column>
        <el-table-column prop="monthHb"
                         align="center"
                         label="环比"></el-table-column>
      </el-table-column>
      <el-table-column label="存存量"
                       align="center">
        <el-table-column prop="monthCcl"
                         align="center"
                         label="当月"></el-table-column>
        <el-table-column prop="cclHb"
                         align="center"
                         label="环比"></el-table-column>
      </el-table-column>
      <el-table-column label="存增量"
                       align="center">
        <el-table-column prop="monthCzl"
                         align="center"
                         label="当月"></el-table-column>
        <el-table-column prop="czlHb"
                         align="center"
                         label="环比"></el-table-column>
      </el-table-column>
      <el-table-column label="新增量"
                       align="center">
        <el-table-column prop="monthZl"
                         align="center"
                         label="当月"></el-table-column>
        <el-table-column prop="zlHb"
                         align="center"
                         label="环比"></el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

import { getWholeView } from "@/api/barCode/index";
export default {
  name: "wholeView",
  components: {},
  props: {
    form: {
      type: Object,
      default: {},
    },
  },
  data () {
    return {
      tableLoading: false,
      tableData: [],
      breadList: [{
        areaName: '杭州分公司',
        areaId: 2
      }],
      areaId: ''
    };
  },
  created () { },
  mounted () { },
  methods: {
    getList () {
      this.tableData = []
      this.tableLoading = true;
      let obj = Object.assign({}, this.form)
      if (this.areaId) {
        obj.areaId = this.areaId
      }
      getWholeView(obj).then((res) => {
        if (res.code == 200) {
          this.tableLoading = false;
          this.tableData = res.data;
        }
      });
    },
    handleArea (row) {
      if (Number(row.areaLvl) > 6) {
        return;
      }
      if (row.displayName == this.breadList[this.breadList.length - 1].areaName) {
        return
      }
      let obj = {}
      obj.areaName = row.displayName
      obj.areaId = row.areaId
      this.breadList.push(obj)
      this.areaId = row.areaId
      this.getList()
    },
    handle_back (item, index) {
      if (index == 0) {
        this.breadList = [{
          areaName: '杭州分公司',
          areaId: 2
        }]
      }
      this.breadList.splice(index + 1, this.breadList.length - index)
      this.areaId = item.areaId;
      this.getList()
    },
  },
};
</script>

<style scoped>
.area {
  color: #1890ff;
  cursor: pointer;
}
.breadcrumb {
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.breadItem {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.breadItem > div {
  margin-right: 5px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
}
.breadItem > p {
  padding: 0 10px;
  margin: 0;
}
.breadItem div:hover {
  color: #1890ff;
}
</style>
